<template>
	<view class="pages"  :style="{'min-height':h+'px', 'padding-top':mt+'px'}">

		<c-nav-bar :title="titleHeader"></c-nav-bar>
		<view class="spotInfo">

			<view class="spotInfo">
				<view class="">
					日期：{{day}}
				</view>

				<view class="top">
					<view class="left">
						<span class="blue"></span>
						<span></span>
						<span class="red"></span>
					</view>
					<view class="middle">
						<view>
							<text style="margin-right: 30rpx;color: #c7c7c7;font-weight: 400;">出发地</text>
							<text>{{list[0][0].name}}</text>
						</view>
						<view>
							<text style="margin-right: 30rpx;color: #c7c7c7;font-weight: 400;">目的地</text>
							<text>{{list[0][arriveSpotLength-1].name}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="program">
				<view class="card" v-for="(item,idx) in list" :key="idx">
					<view class="top">
						<image class="juxing"
							src="https://i.ringzle.com/file/20240112/f47c114edef541bbb2288c7a226431a9.png"
							mode="aspectFit">
							<image class="piaodai"
								src="https://i.ringzle.com/file/20240112/610e6a26e23744c19479faacc47b27bf.png" mode="">
								<text class="fangan">方案{{arabicToChinese(idx+1)}}</text>
							</image>
						</image>
					</view>
					<view class="middle">
						<view class="m1">
							<span v-for="cc,number in item" :key="number">
								{{cc.name}}
								<span v-if="number<item.length-1">-</span>
							</span>
						</view>
						<view class="m2">
							<image src="https://i.ringzle.com/file/20240112/46cae3aeb3a441e39678919cbd821f47.png"
								mode="aspectFit"></image>
							<text>路线建议</text>
						</view>
						<view class="m3" v-if="item[0].desc">
							<text>{{item[0].desc}}</text>
						</view>
						<view class="m4" v-if="item[0].closeFlag&&item[0].ticketList.length"
							@click="changFlag(false,idx)">
							<text>
								详情
							</text>
							<image src="https://i.ringzle.com/file/20240112/b4a30ae897924dd0bf6a90e3631cc980.png"
								mode="">
							</image>
						</view>
						<view class="m5" v-else-if="!item[0].closeFlag&&item[0].ticketList.length">
							<view class="content">
								<view class="c_items" v-for="(i,index) in item[0].ticketList" :key="index"
									@click="goToDetail(i)">
									<view class="time">
										{{i.sailTime}}
										<view class="cclp" v-if="carship">
											<text>车船联票</text>
											<image v-if="i.priceAndTotalCount.totalCount!=0"
												src="@/static/index/steamerTicket/icon_trigon1.jpg"></image>
											<image v-else src="@/static/index/steamerTicket/icon_trigon_hs.png">
											</image>
										</view>
									</view>
									<view class="middle">
										<view class="top">
											<image src="@/static/index/steamerTicket/icon_line.jpg" mode=""></image>
											<view class="texts">
												<text>{{i.startPortName}}</text>
												<text>{{i.endPortName}}</text>
											</view>
										</view>
										<view class="cbottom">{{i.clxm}}
											<span v-if="i.timeMemosStr">{{i.timeMemosStr}}</span>
										</view>
									</view>
									<view class="right" v-if="i.lineState==0">
										<view class="price">
											￥<span>{{!hasLocal?i.priceAndTotalCount.minPrice:i.priceAndTotalCount.localMinPrice}}</span>
										</view>
										<text
											v-if="(hasLocal?i.priceAndTotalCount.totalCount:i.priceAndTotalCount.pubTotalCount)>0">余票{{hasLocal?i.priceAndTotalCount.totalCount:i.priceAndTotalCount.pubTotalCount}}张</text>
										<text v-else>售罄</text>
									</view>
									<view class="right_state" v-else>
										{{i.lineStateName||'未知'}}
									</view>
								</view>
							</view>
							<view class="m4" @click="changFlag(true,idx)">
								<text style="
								margin-right: 12rpx;">
									收起
								</text>
								<u-icon size='14' color='#188FFE' name="arrow-up" width='24' height="24"></u-icon>
							</view>
						</view>
						<view class="m4" v-else-if='!item[0].ticketList.length'>
							<text style="color: #868484;" v-if="item[0].directionType==2">

							</text>
							<text style="color: #868484;" v-else>
								当前时间段没有可用航线！
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h:uni.getSystemInfoSync().windowHeight - 87,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleHeader: '路线详情',
				list: [],
				arriveSpotLength: null,
				closeFlag: true,
				hasLocal: false,
				day: '',
			}
		},
		onLoad(option) {
			console.log('optionoptionoptionoption', option)
			this.day = option.myday;

			this.list = JSON.parse(option.list)
			this.arriveSpotLength = this.list[0].length
			this.list.forEach((i, index) => {
				this.$set(this.list[index][0], 'closeFlag', true)
			})
			this.getIsLocal()

			console.log(this.list, 'list++++++++');

		},
		methods: {
			getIsLocal() {
				if (!uni.getStorageSync('userInfo')) return
				this.$api.get('/api/commonPerson/isLocalCount', {
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
					isLocal: 1
				}).then(res => {
					if (res.data.code === 0) {
						this.hasLocal = res.data.data > 0 ? true : false;
					} else this.$showModal(res.data.msg);
				})
			},
			// 数字转化成汉字
			arabicToChinese(number) {
				var chineseNumbers = ['一', '二', '三', '四', '五', '六', '七', '八', '九'];
				if (number >= 1 && number <= 9) {
					return chineseNumbers[number - 1];
				} else {
					return number;
				}
			},
			changFlag(boolen, index) {
				console.log(boolen, index, '+++++');

				this.$set(this.list[index][0], 'closeFlag', boolen)

				console.log(this.list, '----111111++');
			},
			goToDetail(item) {
				if (item.lineState != 0) return
				let type = '';
				uni.setStorageSync('shipType', 1);
				let url = '/pagesIndex/steamerTicket/confirmBooking?item=' + JSON.stringify(item) + '&type=' + type;

				uni.navigateTo({
					url
				});
			}
		}

	}
</script>

<style lang="scss">
	.pages {
		background: #fbfbfb;
		height: 100%;
		padding: 20rpx;
		// padding-top: 130rpx;

		.program {
			
			height: fit-content;

			.card {
				background: #fff;
				border-radius: 16rpx;

				.top {
					position: relative;

					.juxing {
						width: 702rpx;
						height: 98rpx;
					}

					.piaodai {
						position: absolute;
						left: 0;
						width: 148rpx;
						height: 64rpx;
						bottom: 10px;

					}

					.fangan {
						position: absolute;
						left: 15px;
						top: 30rpx;
						color: white;
						font-size: 28rpx;

					}
				}

				.middle {
					padding: 0 20rpx;

					.m1 {
						font-size: 30rpx;
						font-weight: 700;
					}

					.m2 {
						color: #88919D;
						margin: 20rpx 0;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;

						&>image {
							width: 32rpx;
							height: 34rpx;
							margin-right: 12rpx;

						}
					}

					.m3 {
						color: #88919D;

					}

					.m4 {
						text-align: center;
						color: #188FFE;
						margin: 30rpx 0;

						.arrow {
							width: 16rpx;
							height: 8rpx;
							border: 2rpx solid #188FFE;
						}

						&>image {
							width: 24rpx;
							height: 24rpx;
							margin-left: 12rpx;
						}

					}

					.m5 {


						.m4 {
							text-align: center;
							color: #188FFE;
							margin: 30rpx 0;
							display: flex;
							justify-content: center;

							.arrow {
								width: 16rpx;
								height: 8rpx;
								border: 2rpx solid #188FFE;
							}


						}

						.content {
							width: 100%;
							height: calc(100% - 132rpx);
							background: #F5F8FA;
							box-sizing: border-box;
							overflow-y: auto;


							.c_items {
								background: #FFFFFF;
								border-radius: 16rpx;
								padding: 50rpx 24rpx;
								display: flex;
								justify-content: space-around;
								position: relative;

								.time {
									width: 100rpx;
									font-size: 40rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
									color: #333333;
									line-height: 56rpx;
									display: flex;
									flex-direction: column;
									justify-content: space-between;
									padding-top: 14rpx;

									.cclp {
										width: 124rpx;
										height: 32rpx;
										display: flex;
										align-items: center;
										justify-content: center;
										background: rgba(13, 191, 253, 0.09);
										border-radius: 4rpx;

										text {
											font-size: 20rpx;
											font-family: PingFangSC-Regular, PingFang SC;
											font-weight: 400;
											color: #007A69;
										}

										image {
											width: 10rpx;
											height: 12.5rpx;
											margin-left: 11rpx;
										}
									}
								}

								.middle {
									width: calc(100% - 260rpx);
									padding-left: 40rpx;
									box-sizing: border-box;

									.top {
										display: flex;
										align-items: center;

										&>image {
											width: 8rpx;
											height: 68rpx;
										}

										.texts {
											display: flex;
											flex-direction: column;
											padding-left: 19rpx;

											text {
												font-size: 30rpx;
												font-family: PingFang-SC-Bold, PingFang-SC;
												font-weight: bold;
												color: #333333;

												&:last-child {
													margin-top: 25rpx;
												}
											}
										}
									}

									.cbottom {
										font-size: 24rpx;
										font-family: PingFangSC-Regular, PingFang SC;
										font-weight: 400;
										color: #999999;

										padding-left: 24rpx;

										span {
											font-size: 24rpx;
											font-family: PingFangSC, PingFang SC;
											font-weight: 400;
											color: #999999;
											margin-left: 10rpx;
											padding-left: 10rpx;
											position: relative;

											&::before {
												content: '';
												width: 1rpx;
												height: 20rpx;
												background: #CCCCCC;
												position: absolute;
												left: 0;
												top: 50%;
												margin-top: -10rpx;
											}
										}
									}
								}

								.right {
									width: 160rpx;
									display: flex;
									flex-direction: column;
									text-align: right;
									padding-top: 16rpx;

									.price {
										font-size: 24rpx;
										font-family: PingFangSC-Regular, PingFang SC;
										font-weight: 400;
										color: #FF4141;

										span {
											font-size: 40rpx;
											font-weight: bold;
										}
									}

									text {
										font-size: 24rpx;
										font-family: PingFangSC-Regular, PingFang SC;
										font-weight: 400;
										color: #999999;
										margin-top: 10rpx;
									}
								}

								.right_state {
									width: 160rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									font-size: 40rpx;
									font-family: PingFang-SC, PingFang-SC;
									font-weight: bold;
									color: #AAAAAA;
									text-align: right;
								}

								&.active {

									.time,
									.price,
									.cbottom,
									text,
									span {
										color: #CCCCCC !important;
									}

									.cclp {
										background: #F6F6F6;
									}
								}

								.ci_bg {
									width: 160rpx;
									height: 106rpx;
									position: absolute;
									top: 50%;
									margin-top: -53rpx;
									right: 156rpx;
									z-index: 9;
								}
							}

							.c_linetip {
								width: calc(100% + 48rpx);
								background: #FFF5EB;
								padding: 10rpx 24rpx;
								box-sizing: border-box;
								font-size: 24rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #FF7D01;
								line-height: 30rpx;
								margin-top: 0;
								margin-left: -24rpx;
							}

							&.content_empty {
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.c_empty {
								width: calc(100% - 32rpx);
								display: flex;
								flex-direction: column;
								align-items: center;
								padding: 0;
								background: #F5F8FA;

								image {
									width: 204rpx;
									height: 130rpx;
								}

								.ce_tip {
									font-size: 32rpx;
									font-family: PingFang-SC, PingFang-SC;
									font-weight: bold;
									color: #333333;
									margin-top: 48rpx;
								}

								.ce_ssgq {
									margin-top: 16rpx;

									&>view {
										font-size: 30rpx;
										font-family: PingFangSC, PingFang SC;
										font-weight: 400;
										color: #333333;
										line-height: 48rpx;
										text-align: center;
									}
								}

								.ce_btn {
									width: 100%;
									height: 88rpx;
									background: #33AFFC;
									box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(13, 191, 253, 0.3);
									border-radius: 44rpx;
									line-height: 88rpx;
									text-align: center;
									font-size: 32rpx;
									font-family: PingFang-SC, PingFang-SC;
									font-weight: bold;
									color: #FFFFFF;
									letter-spacing: 2rpx;
									margin-top: 29rpx;
								}
							}
						}
					}
				}
			}
		}

		.spotInfo {
			display: flex;
			flex-direction: column;

			background: #FFFFFF;
			border-radius: 24rpx;

			margin: 0px 20rpx;
			padding: 41rpx 20rpx;
			box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(1, 185, 249, 0.1);
			margin: 20rpx 0;

			.top {
				display: flex;
				flex-direction: row;

				align-items: center;
				height: 100%;


				.left {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 14%;

					.blue {
						display: block;
						width: 15rpx;
						height: 15rpx;
						background: #188FFE;
						border-radius: 7rpx;
					}

					span:nth-child(2) {
						display: block;
						border-left: 1rpx solid #d5d5d5;
						height: 72rpx;
						border-radius: 7rpx;
						margin: 8rpx 0;
					}

					.red {
						display: block;
						width: 15rpx;
						height: 15rpx;
						background: #FF5252;
						border-radius: 7rpx;
					}
				}

				.middle {
					width: 526rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 600;
					width: 88%;

					view {
						height: fit-content;
						line-height: 50rpx;
						border-bottom: #f7f4f4 1rpx solid;
						padding: 20rpx 0;
					}

					view:nth-child(1) {}
				}

				.right {
					width: 64rpx;
					height: 64rpx;
					background: url('@/static/index/travelPlanning/wfqh.png') center repeat;
					background-size: cover;
				}
			}
		}
	}
</style>